<template>
  <div id="selectPanelBox">
    <el-select
      size="medium"
      v-model="selectPanelData.x"
      @change="selectXHandle"
      placeholder="请选择X轴数据"
    >
      <el-option
        v-for="item in selectDatas"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select
      size="medium"
      v-model="selectPanelData.y"
      @change="selectYHandle"
      placeholder="请选择Y轴数据"
    >
      <el-option
        v-for="item in selectDatas"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      selectDatas: [],
      selectPanelData: {
        x: "",
        y: "",
      },
    };
  },
  created() {
    this.selectDatas = Object.keys(this.$store.getters.getSQLData[0]);
    this.selectPanelData.x = this.$store.getters.getSelectPanelXData;
    this.selectPanelData.y = this.$store.getters.getSelectPanelYData;
  },
  watch: {
    "$store.state.sqlHandleData": {
      handler: function (val) {
        if (val[0]) {
          this.selectDatas = Object.keys(val[0]);
        }
      },
    },
    "$store.state.sqlData": {
      handler: function (val) {
        if (val[0]) {
          this.selectDatas = Object.keys(val[0]);
        }
      },
    },
    "$store.state.selectPanelData": {
      handler: function (val) {
        this.selectPanelData.x = val.x;
        this.selectPanelData.y = val.y;
      },
    },
  },
  methods: {
    selectXHandle(key) {
      this.selectPanelData.x = key;
      this.submitSelectData();
    },
    selectYHandle(key) {
      this.selectPanelData.y = key;
      this.submitSelectData();
    },
    submitSelectData() {
      this.$store.commit("setTableShowXYData", {
        selectPanelData: {
          x: this.selectPanelData.x,
          y: this.selectPanelData.y,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.el-select {
  width: 100%;
  padding: 0.2rem 0;
}
@media screen and (max-width: 1280px) {
  padding: 0.6rem 0;
}
</style>